+
<template>
    <div class="modPage" :style="{color:defaultmoddata.config.fontcolor}">
        <div class="title">
            <div class="titlecon">
                <div class="title-box">{{defaultmoddata.config.title}}</div>
            </div>
        </div>
        <div class="ssp_stampHeader"></div>
        <div class="modPagecontent">
            <div class="clearstyle" v-html="defaultmoddata.config.content"></div>
            <ul>
                <li v-for="field in fieldList" class="fielditem" :key="field.Id">
                    <i class="mast" v-if="field.IsFillNeccssery">*</i>
                    <mt-cell :title="field.Title" v-if="field.Type==0"></mt-cell>
                    <mt-field placeholder="请输入" v-if="field.Type==0" v-model="answerDic[field.Id]"></mt-field>
                    <mt-cell :title="field.Title" v-if="field.Type==1"></mt-cell>
                    <mt-field placeholder="请输入" v-if="field.Type==1" type="textarea" rows="3" v-model="answerDic[field.Id]"></mt-field>
                    <mt-cell :title="field.Title" v-if="field.Type==2"></mt-cell>
                    <mt-radio v-if="field.Type==2" :options="field.options" v-model="answerDic[field.Id]"></mt-radio>
                    <mt-cell :title="field.Title" v-if="field.Type==3"></mt-cell>
                    <mt-checklist v-if="field.Type==3" :options="field.options" v-model="answerDic[field.Id]"></mt-checklist>
                </li>
            </ul>
            <mt-button type="primary" size="large" @click="submit">提交</mt-button>
        </div>
        <div class="ssp_stampFooter"></div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        Field,
        Radio,
        Checklist,
        Cell,
        Button,
        MessageBox,
        Toast
    } from 'mint-ui';
    // mint-ui组件引入
    Vue.component(Field.name, Field);
    Vue.component(Checklist.name, Checklist);
    Vue.component(Radio.name, Radio);
    Vue.component(Cell.name, Cell);
    Vue.component(Button.name, Button);
    export default {
        props: ["taskdata", "moddata", "index", "container", "fielddatas", "topics"],
        data: function () {
            return {
                maskshow: false,
                checklist: [],
                answerDic: {}
            }
        },
        created() {
            var that = this;
            this.fieldList.forEach(function (item) {
                if (item.Type == 3) {
                    if (!that.fielddatas[item.Id]) {
                        that.$set(that.answerDic, item.Id, [])
                    } else {
                        that.$set(that.answerDic, item.Id, JSON.parse(that.fielddatas[item.Id]))
                    }
                } else {
                    that.$set(that.answerDic, item.Id, that.fielddatas[item.Id])
                }
            })
        },
        computed: {
            defaultmoddata() {
                if (this.moddata) {
                    return this.moddata
                } else {
                    return this.container.items[this.$route.params.index]
                }
            },
            moddataconfig() {
                var that = this;
                var list = [];
                this.defaultmoddata.config.fields.forEach(function (item, index) {
                    for (let i = 0, l = that.topics.length; i < l; i++) {
                        if (item.Id == that.topics[i].Id) {
                            list.push(that.topics[i]);
                            break;
                        }
                    }
                });
                return list
            },
            fieldList() {
                var that = this;
                this.moddataconfig.forEach(function (item, index) {
                    if (item.Type == 3) {
                        item.options = []
                        item.TopicBody.Options.forEach(function (f, i) {
                            if (!f.Hiden) {
                                item.options.push({
                                    label: f.Title,
                                    value: {
                                        key: f.Key,
                                        value: f.Title
                                    }
                                })
                            }
                        })
                    } else if (item.Type == 2) {
                        item.options = []
                        item.TopicBody.Options.forEach(function (f, i) {
                            if (!f.Hiden) {
                                item.options.push({
                                    label: f.Title,
                                    value: JSON.stringify([{
                                        key: f.Key,
                                        value: f.Title
                                    }])
                                })
                            }
                        })
                    }
                })
                return this.moddataconfig
            },
            comanswerDic() {
                var json = {};
                var that = this;
                this.fieldList.forEach(function (item) {
                    if (item.Type == 3) {
                        json[item.Id] = JSON.stringify(that.answerDic[item.Id])
                    } else {
                        json[item.Id] = that.answerDic[item.Id];
                    }
                })
                return json;
            }
        },
        methods: {
            submit() {
                var that = this,
                    test = true,
                    idcardId = '',
                    telephoneId = '',
                    emailId = '';
                for (var i = 0; i < that.fieldList.length; i++) {
                    if (that.fieldList[i].IsFillNeccssery) {
                        if (!that.answerDic[that.fieldList[i].Id].length) {
                            test = false;
                            break;
                        }
                    }
                    if (that.fieldList[i].Title == '手机号') {
                        telephoneId = that.fieldList[i].Id
                    }
                    if (that.fieldList[i].Title == '身份证') {
                        idcardId = that.fieldList[i].Id
                    }
                    if (that.fieldList[i].Title == '邮箱') {
                        emailId = that.fieldList[i].Id
                    }
                }
                if (test) {
                    if (that.answerDic[idcardId]) {
                        if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(that.answerDic[idcardId]))) {
                            Toast('身份证号格式错误');
                            return false
                        }
                    }
                    if (that.answerDic[telephoneId]) {
                        if (!(/^1[34578]\d{9}$/.test(that.answerDic[telephoneId]))) {
                            Toast('手机号格式错误');
                            return false
                        }
                    }
                    if (that.answerDic[emailId]) {
                        if (!(/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(that.answerDic[telephoneId]))) {
                            Toast('邮箱格式错误');
                            return false
                        }
                    }
                    $.ajax("/Event/Manage/UpdateRegister?_taskId_=" + window.Parameters.taskId, {
                        type: "post",
                        data: JSON.stringify({
                            answers: that.comanswerDic,
                            attendeeId: window.AttendId
                        }),
                        contentType: "application/json",
                        success: function (r) {
                            if (r.success) {
                                MessageBox({
                                    title: '提示',
                                    message: '提交成功',
                                    closeOnClickModal: false
                                }).then(action => {
                                    window.location.href = window.location.origin + window.location
                                        .pathname
                                });;
                            } else {
                                MessageBox({
                                    title: '提示',
                                    message: '提交失败',
                                    closeOnClickModal: false
                                })
                            }
                        }
                    });
                } else {
                    Toast('请完成必填项')
                }

            }
        }
    }
</script>

<style scoped>
    .modPage {
        position: relative;
        padding: 15px;
    }

    .modPage .modPagecontent {
        padding: .444444rem;
        overflow-x: hidden;
        min-height: 2.222222rem;
        font-size: 16px;
        background: #ffffff;
    }

    .modPage .modPagecontent p {
        line-height: 24px;
    }

    .fielditem {
        /* margin-bottom: 5px; */
        position: relative;
    }

    .key {
        color: #999;
    }

    div.ssp_stampHeader {
        background-image: url(/Areas/Template/Content/Module/img/bj-05.png);
        -ms-background-size: contain;
        background-size: contain;
        height: 20px;
        margin-top: 10px;
    }

    div.ssp_stampFooter {
        background-image: url(/Areas/Template/Content/Module/img/bj-06.png);
        -ms-background-size: contain;
        background-size: contain;
        height: 20px;
    }

    .modPage .title .titlecon {
        padding: 0;
    }

    .mast {
        color: #f00;
        position: absolute;
        top: 13px;
        left: 3px;
        z-index: 1;
    }
</style>
<style>
    .fielditem .mint-cell-wrapper {
        background-image: none;
    }
</style>